// 抽屉导航组件
import react, { useState } from 'react'
import Router from 'next/router'
import Link from 'next/link'

import { Drawer, Menu, Avatar } from 'antd';
import { CodeOutlined, SmileOutlined, HomeOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;

import '../../styles/api/navDrawer.scss'

const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

function NavDrawer (props) {

  const [openKeys, setOpenKeys] = useState(['sub1']);

  const onOpenChange = keys => {
    const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <div className="nav-drawer">
      <Drawer
        placement="left"
        closable={false}
        onClose={props.onClose}
        visible={props.visible}
      >
        {/* 头像 */}
        <div className="up-img">
          <Avatar 
            size={{ xs: 100, sm: 60, md: 80, lg: 90, xl: 100, xxl: 120 }}
            src="https://blog.kaygb.com/usr/uploads/kaygbcom/icon/f1.jpg" />
        </div>

        {/* 导航 */}
        <Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange}>
          <Menu.Item key="1" icon={<HomeOutlined />}>
            <Link href="/?index=1">首页</Link>
          </Menu.Item>
          <SubMenu key="sub1" icon={<CodeOutlined />} title={<Link href="/article?index=2">文章</Link>}>
            <Menu.Item key="2">js</Menu.Item>
            <Menu.Item key="3">node</Menu.Item>
            <Menu.Item key="4">vue</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<SmileOutlined />} title="生活">
            <Menu.Item key="5">js</Menu.Item>
            <Menu.Item key="6">node</Menu.Item>
          </SubMenu>
        </Menu>
      </Drawer>
    </div>
  )
}

export default NavDrawer
